<!--  -->
<template>
<div class='product-page'>
  <c-title :hide="false" :text="productTitle" ></c-title>
  <van-search v-model="query.keyword" placeholder="输入您想搜索的关键词" shape="round" @input="searchChange" />
  <div class="product-content">
    <div class="product-tag" v-if="tagList.length > 0">
      <div class="tag-list flex" :style="(tagList.length > 4 && !productShow)?{'height':tagHeight+'px'} : ''">
        <block v-for="(item,index) in tagList" :key="index" class="flex tag-box" ref="tagItem">
          <div class="title" >{{item.name}}</div>
          <div class="" style="width:100%;">
            <div style="position: relative;overflow: hidden;" class="flex"  ref="tag">
              <div class="tag-list-child flex" >
                <div class="tag-item"
                  v-for="(itemChild,indexChild) in item.value" 
                  :class="itemChild.checked?'on':''" 
                  :style="itemChild.checked?`background: rgba(${coThemeColor},0.1);`:''"
                  :key="indexChild"
                  @click="tagClick({itemChild,index,indexChild})">
                  {{itemChild.name}}
                </div>
              </div>
            </div>
          </div>
        </block>
      </div>
      <div class="product-btn product-up " @click="productBtn" v-if="!productShow && tagList.length > 4">
        <span>展开<sapn class="icon-icon_down1  iconfont"></sapn></span>
      </div>
      <div class="product-btn product-up"  @click="productBtn" v-if="productShow && tagList.length > 4">
        <span>收起<sapn class="icon-icon_up1 iconfont"></sapn></span>
      </div>
    </div>

    <div class="product-goods flex flex-j-sb" v-if="goodsList.length > 0">
      <div class="goods-item"  v-for="(item,index) in goodsList" @click="goodsTo(item)">
        <van-image
          width="9.4375rem"
          height="9.4375rem"
          radius="0.5rem"
          :src="item.thumb"
        />
        <h3 class="ell">{{item.title}}</h3>
      </div>
      
    </div>
    <van-empty description="暂无数据" v-else/>
  </div>
</div>
</template>

<script>
import productIndex_controller from "./productIndex_controller";
export default productIndex_controller;
</script>
<style lang="scss" scoped>
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 定义显示的行数 */
  overflow: hidden;
}
/* @import url(); 引入公共css类 */
  .product-content {
    margin:0.625rem 0.75rem 0 0.75rem;
    .product-tag {
      background: #FFFFFF;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
      padding:0.75rem 0.625rem 0.125rem 0.625rem;
      .tag-list {
        flex-direction: column;
        overflow: hidden;
        .tag-box {
          padding:0 0 13px 0; //改成rem，js计算会不准
          flex-direction: column;
          &:last-child {
            padding:0;
          }
          .title {
            // width:23%;
            // min-width: 23%;
            padding:0 0.6875rem 0.5rem 0;
            box-sizing: border-box;
            text-align: left;
            font-size: 0.875rem;
            line-height: 24px;
            color: #00001C;
            font-weight: 500;
          }
          .list-child {
            width:77%;
            flex-direction: column;
          }
          .tag-list-child {
            
            // width:77%;
            // flex-wrap: wrap;
            // overflow-x: scroll;
            grid-column-gap:0.625rem;
            // overflow: hidden;
            .tag-item {
              // background: #F5F5F5;
              // border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
              min-width: 2.875rem;
              padding:0.375rem 0.4375rem;
              font-size: 0.75rem;
              // color: #00001C;
              color: #8D8D8D;
              line-height: 0.75rem;
              margin:0 0px 8px 0;
              box-sizing: border-box;
              white-space: nowrap;
              // text-align: left;
            }
            .on {
              border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
              min-width: 2.875rem;
              padding:0.375rem 0.4375rem;
              color:var(--themeBaseColor);
            }
          }
        }
      }
      .product-btn {
        font-weight: 400;
        font-size: 0.8125rem;
        color: #AAAAB3;
        text-align: center;
        padding:0.5rem 0 1rem 0;
        .iconfont {
          padding:0 0 0 0.375rem;
        }
      }
      .theme-color {
        color:var(--themeBaseColor);
      }
    }
    .product-goods {
      margin:0.625rem 0 0 0;
      flex-wrap: wrap;
      .goods-item {
        background: #FFFFFF;
        border-radius: 0.5rem;
        width:calc(50% - 0.3125rem);
        padding:0.625rem;
        // width:50%;
        margin:0 0 0.625rem 0;
        h3 {
          font-weight: 500;
          font-size: 0.875rem;
          color: #00001C;
          padding:0.625rem 0 0 0;
        }
      }
    }
  }
</style>